{% extends "forum/forum_home.html" %}
{% block page_link %}

{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .data_num {
            display: inline-block;
            color: #0b0b0b;
        }

        .forum_title a:link {
            color: black;
        }

        /*.forum_title a:visited {*/
        /*    color:red;*/
        /*}*/
        .forum_title a:hover {
            text-decoration: underline;
        }

        .forum_title a {
            font-size: 18px;

        }

        .jjj {
            color: red;
        }

        #div a:hover {
            text-decoration: underline;
        }

        .choose ul {
            border-bottom: 1px solid #0070c1;
            list-style: none;
            width: 100%;
            padding: 0;
        }
    </style>
{% endblock %}

{% block right_content %}
    <div style="position: fixed; top: 130px; right: 20px; width: 300px; height: 40%; padding: 10px">
        <div style="text-align: center; margin-top: 20px; height: 70px">
            {% if head_portrait %}
                <img src="/media/{{ head_portrait }}" alt="" height="70px" width="70px" style="border-radius: 50%" id="head_photo">
            {% else %}
                <img src="../../static/personal_center/img/default.jpeg" alt="" height="70px" width="70px" style="border-radius: 50%" id="head_photo">
            {% endif %}
        </div>
        <div style="text-align: center; margin-top: 20px; font-size: 18px">
            {{ user_obj.real_name }}
        </div>
        <div style="padding-left: 100px"><span>发帖数：</span><span>{{ objs.count }}</span></div>
        <div style="padding-left: 100px"><span>排&nbsp;&nbsp;&nbsp;&nbsp;名：</span><span>{{ rank }}</span></div>
        <div style="padding-left: 100px"><span>点&nbsp;&nbsp;&nbsp;&nbsp;赞：</span><span>{{ like_num }}</span></div>
        <div style="padding-left: 100px"><span>评&nbsp;&nbsp;&nbsp;&nbsp;论：</span><span>{{ comment_num }}</span></div>
    </div>
    <div style="width:100%; height: auto;padding: 10px;margin-top: 30px">
        <ul style="width: 80%">
            {% for obj in objs %}
                <li style="padding: 20px; border-bottom: dashed 1px grey; list-style: none" onmousemove="on_this(this)"
                    onmouseout="out_this(this)">
                    <div class="forum_title" style="padding-left: 20px">
                        <a href="forum_details?id={{ obj.id }}"
                           style="color: #121212;font-weight: bold; ">{{ obj.title }}</a>
                    </div>
                    <div style="height: 75px;padding:0 20px 0 20px" id="article_body">
                        <p style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;word-wrap: break-word;">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ obj.content_text }}</p>
                    </div>
                    <div style="padding: 15px 15px 15px 20px">
                        <div style="display: inline-block; padding: 5px;line-height: 14px">
                            <div class="author_name" style="display: inline-block; color: #9195a3">
                                {{ obj.author.real_name }}
                            </div>
                            <div style="display: inline-block">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <div class="update_time" style="display: inline-block; color: #9195a3;font-size: 14px">
                                {{ obj.create_time | date:"Y-m-d H:i" }}
                            </div>
                        </div>
                        <div style="display: inline-block; width: 75%;"></div>
                        <div style="display: inline-block;">
                            <div class="data_num" style="width: auto;height: auto; padding: 6px">
                                <img src="../../static/forum/img/未点赞.png" alt="" width="18px" height="18px">
                                <span>{{ obj.like_users.all.count }}</span>
                            </div>
                            <div class="data_num" style="width: auto;height: auto; padding: 6px">
                                <img src="../../static/forum/img/non_comment.png" alt="" width="18px" height="18px">
                                <span>{{ obj.articlecomment_set.all.count }}</span>
                            </div>
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>

{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("forum").className = "add_class";
            document.getElementById("main_page").className = "add-nav-active";
            var head_img = '{{ user_obj.head_portrait }}'
            if (!head_img) {
                document.getElementById("head_photo").img.scr = "../../static/personal_center/img/default.jpeg";
            }
        };

        function on_this(this_is) {
            this_is.style.background = '#e3e3e3'
        }

        function out_this(this_is) {
            this_is.style.background = '#e8edf4'
        }
    </script>
{% endblock %}